<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        body {
            background: url("https://game.gtimg.cn/images/yxzj/coming/v2/skins/image/20210803/16279821405556.jpg") no-repeat center center fixed;
            background-size: 100%;
        }

        ul li {
            list-style: none;
        }

        .menu {
            width: 99%;
            height: 250px;
        }

        .menu ul li {
            float: left;
            position: relative;
            margin: 20px 85px;
            font-size: large;
        }

        .menu ul li ul {
            width: 300px;
            height: 160px;
            margin-left: -125px;
            display: none;
            position: absolute;
        }

        .menu ul li:hover ul {
            display: block;
        }

        .menu ul li a:link {
            color: aliceblue;
            text-decoration: none;
        }

        .menu ul li a:active {
            color: aliceblue;
            text-decoration: none;
        }

        .menu ul li a:visited {
            color: aliceblue;
            text-decoration: none;
        }

        .menu ul li a:hover {
            color: aliceblue;
            text-decoration: none;
        }

        #container {
            display: inline-block;
        }

        .item {
            text-align: center;
            margin: 5px 50px;

        }

        .item-1 {
            width: 300px;
            height: 400px;
            line-height: 25px;
            float: left;
            color: aquamarine;
        }

        .item-2 {
            width: 300px;
            height: 400px;
            line-height: 25px;
            float: left;
            color: aqua;
        }

        .item-3 {
            width: 300px;
            height: 400px;
            line-height: 25px;
            float: left;
            color: blanchedalmond;
        }

        .gongge {
            display: grid;
            grid-template-columns: 33% 33% 33%;
            grid-template-rows: 33% 33% 33%;
            clear: both;
            text-align: center;
        }

        .gongge img {
            width: 350px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div class="menu">
        <ul>
            <li><a href="#">游戏资料</a>
                <ul>
                    <li><a href="#">版本介绍</a></li>
                    <li><a href="#">游戏介绍</a></li>
                    <li><a href="#">英雄资料</a></li>

                </ul>
            </li>
            <li><a href="#">内容中心</a>
                <ul>
                    <li><a href="#">攻略中心</a></li>
                    <li><a href="#">开放素材</a></li>
                    <li><a href="#">共创平台</a></li>
                </ul>
            </li>
            <li><a href="#">赛事中心</a>
                <ul>
                    <li><a href="#">世界赛事</a></li>
                    <li><a href="#">挑战者杯</a></li>
                    <li><a href="#">全国大赛</a></li>
                </ul>
            </li>
            <li><a href="#">百态王者</a>
                <ul>
                    <li><a href="#">荣耀传承</a></li>
                    <li><a href="#">王者文化</a></li>
                    <li><a href="#">万千世界</a></li>
                </ul>
            </li>
            <li><a href="#">社区互动</a>
                <ul>
                    <li><a href="#">创意互动</a></li>
                    <li><a href="#">王者营地</a></li>
                    <li><a href="#">微信圈子</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="container">
        <div class="item item-1">
            <h1>王者荣耀介绍</h1>
            <p>《王者荣耀》是腾讯第一5V5团队公平竞技手游，国民MOBA手游大作！ 5V5王者峡谷、公平对战、还原MOBA经典体验；契约之战、五军对决、边境突围等，带来花式作战乐趣！
                10秒实时跨区匹配，与好友开黑上分，向最强王者进击！</p>
        </div>
        <div class="item item-2">
            <h1>王者荣耀火热台词</h1>
            <p>1.老夫子 ：不努力的人，应该像好色那样好学</p>
            <p>2.达摩：道路很远，脚步更长</p>
            <p>3.赵云：心怀不惧，方能翱翔于天际</p>
            <p>4.王昭君：身躯已然冰封，灵魂仍旧火热</p>
            <p>5.韩信：人总得有个活着的理由</p>
            <p>6.妲己:为什么会痛苦，一直微笑就好了</p>
        </div>
        <div class="item item-3">
            <h1>王者荣耀热点新闻</h1>
            <p>s30新赛季来袭，火鹰船长-莱西奥登场</p>
            <p>鸿运抽奖，抽六次送一次活动开启公告</p>
            <p>BOE王者杯·PP王者荣耀挑战赛全面开启</p>
            <p>蒙犽皮肤设计大赛创意赏析第二期开始</p>
            <p>想上分，来营地！王者营地四周年</p>

        </div>
        <div class="gongge">
            <img
                src="https://ts1.cn.mm.bing.net/th?id=OIP-C.yG3KIeX2X1gyEhQ6uIjXBAHaEB&w=281&h=165&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2" />
            <img
                src="https://ts1.cn.mm.bing.net/th?id=OIP-C.lUEOXXOF_84VsO5uUbepzQHaEo&w=245&h=165&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2" />
            <img
                src="https://ts1.cn.mm.bing.net/th?id=OIP-C.EWuBq5Rs82Vnqv1t0Eh5yQHaEK&w=251&h=165&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2" />
            <img
                src="https://ts1.cn.mm.bing.net/th?id=OIP-C.8L5ttJ-sEJ3krv337Qr7vwHaEK&w=245&h=165&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2" />
            <img
                src="https://tse4-mm.cn.bing.net/th/id/OIP-C.9tLVoyU6mnyB2c89Blw_pAHaE8?w=270&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" />
            <img
                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.HPT44oOAXLtOZO2qmvhxPwHaE8?w=243&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" />
            <img
                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.Pk1Di0_utl428OZpzzQrxQHaE8?w=242&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" />
            <img
                src="https://tse1-mm.cn.bing.net/th/id/OIP-C.e8RDZvpd1364obzShFZHqgHaEK?w=322&h=181&c=7&r=0&o=5&dpr=2&pid=1.7" />
            <img
                src="https://tse3-mm.cn.bing.net/th/id/OIP-C.hgALr82exmskZqwAV1tBlwHaEc?w=290&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" />
        </div>
    </div>
</body>
<foot>
    <div>
    <a href="http://127.0.0.1:5500/1.html"><h2>第一张子网页</h2></a>
    <a href="http://127.0.0.1:5500/2.html"><h2>第二张子网页</h2></a>
    <a href="http://127.0.0.1:5500/3.html"><h2>第三张子网页</h2></a>
    <a href="http://127.0.0.1:5500/4.html"><h2>实验报告</h2></a>
    </div>
</foot>
</html>